<!-- 我的通知 -->
<template>
	<view class="notifications-container">
		<!-- 顶部栏 -->
		<view class="header-bar">
			<text class="back-icon" @click="goBack">←</text>
			<text class="title">我的通知</text>
		</view>
		
		<!-- 通知列表 -->
		<view class="notification-list">
			<view v-if="notifications.length === 0" class="empty-state">
				<text>暂无通知</text>
			</view>
			<view v-else class="notification-item" v-for="(notification, index) in notifications" :key="index" @click="viewNotification(notification)">
				<view class="notification-header">
					<text class="notification-title">{{notification.title}}</text>
					<text class="notification-time">{{notification.time}}</text>
				</view>
				<text class="notification-content">{{notification.content}}</text>
				<view class="notification-footer">
					<text class="notification-type" :class="notification.type">{{notification.typeText}}</text>
					<text class="notification-status" v-if="!notification.isRead">未读</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/common/request.js';
	
	export default {
		data() {
			return {
				notifications: []
			}
		},
		onLoad() {
			this.getNotifications();
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			getNotifications() {
				// 获取通知列表
				request({
					url: '/api/notifications',
					method: 'GET'
				}).then(response => {
					if (response.code === 200) {
						this.notifications = response.data;
					} else {
						uni.showToast({
							title: '获取通知失败',
							icon: 'none'
						});
					}
				}).catch(error => {
					uni.showToast({
						title: '获取通知失败',
						icon: 'none'
					});
				});
			},
			viewNotification(notification) {
				// 标记通知为已读
				if (!notification.isRead) {
					request({
						url: `/api/notifications/${notification.id}/read`,
						method: 'PUT'
					}).then(response => {
						if (response.code === 200) {
							notification.isRead = true;
						}
					});
				}
				
				// 根据通知类型跳转到相应页面
				if (notification.link) {
					uni.navigateTo({
						url: notification.link
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.notifications-container {
		min-height: 100vh;
		background: #f5f5f5;
	}
	
	.header-bar {
		display: flex;
		align-items: center;
		height: 60px;
		background: #f45a1c;
		padding: 0 15px;
		
		.back-icon {
			color: #fff;
			font-size: 24px;
			margin-right: 15px;
		}
		
		.title {
			color: #fff;
			font-size: 18px;
			font-weight: bold;
		}
	}
	
	.notification-list {
		padding: 15px;
	}
	
	.empty-state {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 200px;
		color: #999;
		font-size: 16px;
	}
	
	.notification-item {
		background: #fff;
		border-radius: 8px;
		margin-bottom: 15px;
		padding: 15px;
		box-shadow: 0 2px 6px rgba(0,0,0,0.05);
	}
	
	.notification-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}
	
	.notification-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}
	
	.notification-time {
		font-size: 12px;
		color: #999;
	}
	
	.notification-content {
		font-size: 14px;
		color: #666;
		margin-bottom: 12px;
		line-height: 1.5;
	}
	
	.notification-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.notification-type {
		font-size: 12px;
		padding: 2px 8px;
		border-radius: 4px;
		
		&.system {
			background: #e6f7ff;
			color: #1890ff;
		}
		
		&.course {
			background: #f6ffed;
			color: #52c41a;
		}
		
		&.exam {
			background: #fff7e6;
			color: #fa8c16;
		}
	}
	
	.notification-status {
		font-size: 12px;
		color: #f45a1c;
	}
</style> 